<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册账号</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0F3460',
                        accent: '#E94560',
                        light: '#F5F7FA',
                        dark: '#1A1A2E'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .form-input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary transition duration-200;
            }
            .btn-hover {
                @apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300;
            }
            .card-shadow {
                box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
            }
            .password-strength-bar {
                @apply h-1 rounded-full transition-all duration-300;
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-light to-blue-50 min-h-screen flex items-center justify-center p-4 font-inter text-dark">
<div class="w-full max-w-md">
    <div class="bg-white rounded-2xl card-shadow overflow-hidden">
        <div class="bg-primary p-6 text-white text-center relative overflow-hidden">
            <div class="absolute inset-0 bg-primary/20 opacity-30">
                <i class="fa fa-user-plus absolute -top-10 -right-10 text-[150px] transform rotate-12"></i>
            </div>
            <div class="relative z-10">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold mb-2">创建账户</h2>
                <p class="text-primary-100">填写以下信息注册新账户</p>
            </div>
        </div>

        <div class="p-8">
            <form th:action="@{/register}" method="post" class="space-y-5">
                <div class="space-y-2">
                    <label for="userid" class="block text-sm font-medium text-gray-700">
                        <i class="fa fa-id-card mr-2"></i>用户ID
                    </label>
                    <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <i class="fa fa-id-card"></i>
                            </span>
                        <input type="text" id="userid" name="id" required
                               class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 form-input-focus outline-none"
                               placeholder="请输入您的用户ID">
                        <div id="userid-availability" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-xs hidden"></div>
                    </div>
                    <p id="userid-error" class="text-xs text-red-500 hidden">用户ID只能包含字母、数字和下划线，且长度为3-20个字符</p>
                </div>

                <div class="space-y-2">
                    <label for="username" class="block text-sm font-medium text-gray-700">
                        <i class="fa fa-user mr-2"></i>用户名
                    </label>
                    <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <i class="fa fa-user"></i>
                            </span>
                        <input type="text" id="username" name="username" required
                               class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 form-input-focus outline-none"
                               placeholder="请输入用户名">
                    </div>
                </div>

                <div class="space-y-2">
                    <label for="email" class="block text-sm font-medium text-gray-700">
                        <i class="fa fa-envelope mr-2"></i>邮箱
                    </label>
                    <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <i class="fa fa-envelope"></i>
                            </span>
                        <input type="email" id="email" name="email" required
                               class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 form-input-focus outline-none"
                               placeholder="请输入邮箱地址">
                    </div>
                </div>

                <div class="space-y-2">
                    <label for="password" class="block text-sm font-medium text-gray-700">
                        <i class="fa fa-lock mr-2"></i>密码
                    </label>
                    <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <i class="fa fa-lock"></i>
                            </span>
                        <input type="password" id="password" name="password" required
                               class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 form-input-focus outline-none"
                               placeholder="请输入密码">
                        <button type="button" id="togglePassword" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-700">
                            <i class="fa fa-eye-slash"></i>
                        </button>
                    </div>

                    <div class="password-strength">
                        <div class="flex space-x-1 mb-1">
                            <div id="strength-1" class="password-strength-bar bg-gray-200 flex-1"></div>
                            <div id="strength-2" class="password-strength-bar bg-gray-200 flex-1"></div>
                            <div id="strength-3" class="password-strength-bar bg-gray-200 flex-1"></div>
                            <div id="strength-4" class="password-strength-bar bg-gray-200 flex-1"></div>
                        </div>
                        <p id="strength-text" class="text-xs text-gray-500">密码强度: 未输入</p>
                    </div>
                </div>

                <div class="space-y-2">
                    <label for="confirmPassword" class="block text-sm font-medium text-gray-700">
                        <i class="fa fa-lock mr-2"></i>确认密码
                    </label>
                    <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <i class="fa fa-lock"></i>
                            </span>
                        <input type="password" id="confirmPassword" name="confirmPassword" required
                               class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 form-input-focus outline-none"
                               placeholder="请再次输入密码">
                        <button type="button" id="toggleConfirmPassword" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-700">
                            <i class="fa fa-eye-slash"></i>
                        </button>
                    </div>
                    <p id="password-match" class="text-xs text-red-500 hidden">两次输入的密码不匹配</p>
                </div>

                <div class="flex items-start">
                    <div class="flex items-center h-5">
                        <input id="terms" name="terms" type="checkbox" required
                               class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
                    </div>
                    <div class="ml-3 text-sm">
                        <label for="terms" class="text-gray-600">我同意<a href="#" class="text-primary hover:text-primary/80 font-medium">服务条款</a>和<a href="#" class="text-primary hover:text-primary/80 font-medium">隐私政策</a></label>
                    </div>
                </div>

                <div th:if="${error}" class="bg-red-50 border border-red-200 text-red-600 p-3 rounded-lg text-sm flex items-center">
                    <i class="fa fa-exclamation-circle mr-2"></i>
                    <span th:text="${error}">注册失败，请检查您的输入</span>
                </div>

                <button type="submit"
                        class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-all duration-300 transform btn-hover focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2">
                    <i class="fa fa-user-plus mr-2"></i>注册账号
                </button>
            </form>

            <div class="mt-6 text-center">
                <div class="text-sm text-gray-600">
                    已有账号? <a th:href="@{/login}" class="text-primary hover:text-primary/80 font-medium transition-colors">立即登录</a>
                </div>
            </div>
        </div>
    </div>

    <div class="mt-6 text-center text-gray-500 text-sm">
        <p>© 2025 登录系统. 保留所有权利.</p>
    </div>
</div>

<script>
    // 密码显示/隐藏功能
    const togglePassword = document.getElementById('togglePassword');
    const passwordInput = document.getElementById('password');
    const toggleConfirmPassword = document.getElementById('toggleConfirmPassword');
    const confirmPasswordInput = document.getElementById('confirmPassword');

    togglePassword.addEventListener('click', function() {
        const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
        passwordInput.setAttribute('type', type);
        this.querySelector('i').classList.toggle('fa-eye');
        this.querySelector('i').classList.toggle('fa-eye-slash');
    });

    toggleConfirmPassword.addEventListener('click', function() {
        const type = confirmPasswordInput.getAttribute('type') === 'password' ? 'text' : 'password';
        confirmPasswordInput.setAttribute('type', type);
        this.querySelector('i').classList.toggle('fa-eye');
        this.querySelector('i').classList.toggle('fa-eye-slash');
    });

    // 密码强度检测
    const passwordStrengthBars = [
        document.getElementById('strength-1'),
        document.getElementById('strength-2'),
        document.getElementById('strength-3'),
        document.getElementById('strength-4')
    ];
    const strengthText = document.getElementById('strength-text');

    passwordInput.addEventListener('input', function() {
        const password = this.value;
        let strength = 0;

        if (password.length > 6) strength++;
        if (password.length > 10) strength++;
        if (/[A-Z]/.test(password)) strength++;
        if (/[0-9]/.test(password)) strength++;
        if (/[^A-Za-z0-9]/.test(password)) strength++;

        // 重置所有进度条
        passwordStrengthBars.forEach(bar => {
            bar.className = 'password-strength-bar bg-gray-200 flex-1';
        });

        // 设置进度条颜色和文本
        if (strength === 0) {
            strengthText.textContent = '密码强度: 未输入';
            strengthText.className = 'text-xs text-gray-500';
        } else if (strength <= 2) {
            passwordStrengthBars[0].className = 'password-strength-bar bg-red-500 flex-1';
            if (strength > 1) passwordStrengthBars[1].className = 'password-strength-bar bg-red-500 flex-1';
            strengthText.textContent = '密码强度: 弱';
            strengthText.className = 'text-xs text-red-500';
        } else if (strength <= 3) {
            passwordStrengthBars.forEach((bar, index) => {
                if (index < strength) bar.className = 'password-strength-bar bg-yellow-500 flex-1';
            });
            strengthText.textContent = '密码强度: 中';
            strengthText.className = 'text-xs text-yellow-500';
        } else {
            passwordStrengthBars.forEach((bar, index) => {
                if (index < strength) bar.className = 'password-strength-bar bg-green-500 flex-1';
            });
            strengthText.textContent = '密码强度: 强';
            strengthText.className = 'text-xs text-green-500';
        }

        // 检查密码匹配
        checkPasswordMatch();
    });

    // 密码匹配检查
    confirmPasswordInput.addEventListener('input', checkPasswordMatch);

    function checkPasswordMatch() {
        const password = passwordInput.value;
        const confirmPassword = confirmPasswordInput.value;
        const passwordMatchText = document.getElementById('password-match');

        if (password !== confirmPassword && confirmPassword !== '') {
            passwordMatchText.classList.remove('hidden');
            confirmPasswordInput.classList.add('border-red-500');
            confirmPasswordInput.classList.remove('border-gray-300');
        } else {
            passwordMatchText.classList.add('hidden');
            confirmPasswordInput.classList.remove('border-red-500');
            confirmPasswordInput.classList.add('border-gray-300');
        }
    }

    // 用户ID验证
    const useridInput = document.getElementById('userid');
    const useridError = document.getElementById('userid-error');
    const useridAvailability = document.getElementById('userid-availability');

    useridInput.addEventListener('input', function() {
        const userid = this.value;
        const useridPattern = /^[a-zA-Z0-9_]{3,20}$/;

        if (!useridPattern.test(userid) && userid !== '') {
            useridError.classList.remove('hidden');
            this.classList.add('border-red-500');
            this.classList.remove('border-gray-300');
        } else {
            useridError.classList.add('hidden');
            this.classList.remove('border-red-500');
            this.classList.add('border-gray-300');

            // 这里可以添加AJAX请求来检查用户ID是否已存在
            // 为了演示，我们假设用户ID可用
            if (userid.length >= 3) {
                simulateUserIdCheck(userid);
            } else {
                useridAvailability.classList.add('hidden');
            }
        }
    });



    // 添加输入框动画效果
    document.querySelectorAll('input').forEach(input => {
        input.addEventListener('focus', () => {
            input.parentElement.classList.add('scale-[1.01]');
        });
        input.addEventListener('blur', () => {
            input.parentElement.classList.remove('scale-[1.01]');
        });
    });
</script>
</body>
</html>